#@layoutT("")
#define main()
	<fieldset class="layui-elem-field layui-field-title" style="margin-bottom: 10px;">
          <legend>tree</legend>
    </fieldset>
	<div id="demo1" class="xm-select-demo layui-col-sm6"></div><br/><br/>
	<br/>
	<div class="layui-form">
		<input type="checkbox" name="showFolderIcon" lay-filter="showFolderIcon" lay-skin="primary" title="是否展示三角图标" checked>
		<input type="checkbox" name="showLine" lay-filter="showLine" lay-skin="primary" title="是否显示虚线" checked>
		<input type="checkbox" name="strict" lay-filter="strict" lay-skin="primary" title="严格父子结构" checked>
		<input type="checkbox" name="simple" lay-filter="simple" lay-skin="primary" title="极简模式">
		
		<br/><br/>
		<input type="checkbox" name="hidden" lay-filter="hidden" lay-skin="primary" title="隐藏父节点图标">
		<input type="checkbox" name="custom" lay-filter="custom" lay-skin="primary" title="自定义图标">
		<input type="checkbox" name="all" lay-filter="all" lay-skin="primary" title="展开所有节点">
		<input type="checkbox" name="close" lay-filter="close" lay-skin="primary" title="闭合所有节点">
		<input type="checkbox" name="key3" lay-filter="key3" lay-skin="primary" title="展开指定节点">
		
		<br/><br/>
		<input type="checkbox" name="clickExpand" lay-filter="clickExpand" lay-skin="primary" title="clickExpand" checked>
		<input type="checkbox" name="clickCheck" lay-filter="clickCheck" lay-skin="primary" title="clickExpand" checked>
		
	</div>
	
	<div style="margin-top: 20px">间距</div>
	<div id="slideTest1" class="layui-col-sm6"></div>
	
	<br/><br/>

		<fieldset class="layui-elem-field layui-field-title" style="margin-bottom: 10px;">
           <legend>懒加载树</legend>
       </fieldset>
       <div class="layui-row layui-col-space1 task-row">
	        #@colStart("懒加载树",6)
	        <div id="demo2"></div>
	        #@colEnd()
       </div>
       <br/>	
       
       <fieldset class="layui-elem-field layui-field-title" style="margin-bottom: 10px;">
           <legend>单选树(radio模式)</legend>
       </fieldset>
       <div class="layui-row layui-col-space1 task-row">
	        #@colStart("单选树",6)
	        <div id="demo3"></div>
	        #@colEnd()
       </div>
       <br/>			

		<fieldset class="layui-elem-field layui-field-title" style="margin-bottom: 10px;">
           <legend>部门树(radio模式)</legend>
       </fieldset>
       <div class="layui-row layui-col-space1 task-row">
	        #@colStart("单选+搜索",6)
	        <!-- 原生写法 -->
	        <div id="demo4"></div>
	        #@colEnd()
		</div>
	    <div class="layui-row layui-col-space1 task-row">
	        <!-- 内部封装用法,参数：1、divId,2、表单提交名称 -->
	        #@colStart("单选无搜索",6)
	        	#@getOrgSelect('demo5','org')
	        #@colEnd()
		</div>
	    <div class="layui-row layui-col-space1 task-row">
	        #@colStart("多选+无搜索",6)
	        	#set(radio=false,value='ff808081616e1efd01616e2c89af0000')
	        	#@getOrgSelect('demo6','org3')
	        #@colEnd()
		</div>
	    <div class="layui-row layui-col-space1 task-row">
	         #@colStart("多选+搜索",6)
	        	#set(radio=false,filterable=true)
	        	#@getOrgSelect('demo7','org4')
	        #@colEnd()
       </div>
       <br/>		

#end
#define js()
<script type="text/javascript">
// layui.form.render();
//
// ['showFolderIcon', 'showLine', 'strict', 'simple'].forEach(function(key){
// 	layui.form.on('checkbox('+key+')', function(data){
// 		var treeConfig = {};
// 		treeConfig[key] = data.elem.checked;
// 		demo1.update({
// 			tree: treeConfig
// 		})
// 	});
// })
//
// //控制显示父节点的图标
// layui.form.on('checkbox(hidden)', function(data){
// 	demo1.update({
// 		iconfont: {
// 			parent: data.elem.checked ? 'hidden' : '',
// 		}
// 	})
// });
//
// //自定义图标
// layui.form.on('checkbox(custom)', function(data){
// 	let iconfont = data.elem.checked ? {
// 		select: 'layui-icon layui-icon-chart',
// 		unselect: 'layui-icon-ok-circle',
// 		half: 'layui-icon layui-icon-table',
// 		parent: 'layui-icon layui-icon-survey',
// 	} : {
// 		select: '',
// 		unselect: '',
// 		half: '',
// 		parent: '',
// 	}
// 	demo1.update({
// 		iconfont: iconfont
// 	})
// 	layui.form.render();
// });
//
// //展开所有节点
// layui.form.on('checkbox(all)', function(data){
// 	if(data.elem.checked){
// 		demo1.changeExpandedKeys(true)
// 	}
// });
//
// //闭合所有节点
// layui.form.on('checkbox(close)', function(data){
// 	if(data.elem.checked){
// 		demo1.changeExpandedKeys(false)
// 	}
// });
//
// //展开指定节点
// layui.form.on('checkbox(key3)', function(data){
// 	if(data.elem.checked){
// 		demo1.changeExpandedKeys([ -3 ])
// 	}
// });
//
// layui.form.on('checkbox(clickExpand)', function(data){
// 	demo1.update({
// 		tree: {
// 			clickExpand: data.elem.checked
// 		}
// 	})
// });
//
// layui.form.on('checkbox(clickCheck)', function(data){
// 	demo1.update({
// 		tree: {
// 			clickCheck: data.elem.checked
// 		}
// 	})
// });
//
// layui.slider.render({
// 	elem: '#slideTest1',
// 	min: 10,
// 	max: 100,
// 	showstep: true,
// 	input: true,
// 	tips: true,
// 	value: 20,
// 	change: function(value){
// 		demo1.update({
// 			tree: {
// 				indent: value
// 			}
// 		})
// 	}
// });
//
// var demo1 = xmSelect.render({
// 	el: '#demo1',
// 	autoRow: true,
// 	filterable: true,
// 	tree: {
// 		show: true,
// 		showFolderIcon: true,
// 		showLine: true,
// 		indent: 20,
// 		expandedKeys: [ -3 ],
// 	},
// 	toolbar: {
// 		show: true,
// 		list: ['ALL', 'REVERSE', 'CLEAR']
// 	},
// 	filterable: true,
// 	height: 'auto',
// 	data: function(){
// 		return [
// 			{name: '销售员', value: -1, disabled: true, children: [
// 				{name: '张三1', value: 1, selected: true, children: []},
// 				{name: '李四1', value: 2, selected: true},
// 				{name: '王五1', value: 3, disabled: true},
// 			]},
// 			{name: '奖品', value: -2, children: [
// 				{name: '奖品3', value: -3, children: [
// 					{name: '苹果3', value: 14, selected: true},
// 					{name: '香蕉3', value: 15},
// 					{name: '葡萄3', value: 16},
// 				]},
// 				{name: '苹果2', value: 4, selected: true, disabled: true},
// 				{name: '香蕉2', value: 5},
// 				{name: '葡萄2', value: 6},
// 			]},
// 		]
// 	}
// })
//
// var demo2 = xmSelect.render({
// 	el: '#demo2',
// 	autoRow: true,
// 	tree: {
// 		show: true,
// 		showFolderIcon: true,
// 		showLine: true,
// 		indent: 20,
// 		expandedKeys: [ -1 ],
// 		lazy: true,
// 		load: function(item, cb){
// 			setTimeout(function(){
// 				if(item.name.endsWith('2')){
// 					return cb([]);
// 				}
// 				cb([
// 					{name: item.name + 1, value: item.value + '1', children: [] },
// 					{name: item.name + 2, value: item.value + '2', children: [] },
// 				])
// 			}, 500)
// 		}
// 	},
// 	height: 'auto',
// 	data(){
// 		return [
// 			{name: '销售员', value: -1, children: [
// 				{name: '张三', value: 100, selected: true, children: []},
// 				{name: '李四1', value: 2, selected: true},
// 				{name: '王五1', value: 3, disabled: true},
// 			]},
// 			{name: '奖品', value: -2, children: [
// 				{name: '奖品3', value: -3, children: [
// 					{name: '苹果3', value: 14, selected: true},
// 					{name: '香蕉3', value: 15},
// 					{name: '葡萄3', value: 16},
// 				]},
// 				{name: '苹果2', value: 4, selected: true, disabled: true},
// 				{name: '香蕉2', value: 5},
// 				{name: '葡萄2', value: 6},
// 			]},
// 		]
// 	}
// })
//
// var demo3 = xmSelect.render({
// 	el: '#demo3',
// 	model: { label: { type: 'text' } },
// 	radio: true,
// 	clickClose: true,
// 	tree: {
// 		show: true,
// 		strict: false,
// 		expandedKeys: [ -1 ],
// 	},
// 	height: 'auto',
// 	data(){
// 		return [
// 			{name: '销售员', value: -1, children: [
// 				{name: '张三', value: 100, selected: true, children: []},
// 				{name: '李四1', value: 2, selected: true},
// 				{name: '王五1', value: 3, disabled: true},
// 			]},
// 			{name: '奖品', value: -2, children: [
// 				{name: '奖品3', value: -3, children: [
// 					{name: '苹果3', value: 14, selected: true},
// 					{name: '香蕉3', value: 15},
// 					{name: '葡萄3', value: 16},
// 				]},
// 				{name: '苹果2', value: 4, selected: true, disabled: true},
// 				{name: '香蕉2', value: 5},
// 				{name: '葡萄2', value: 6},
// 			]},
// 		]
// 	}
// })

var demo4 = xmSelect.render({
	el: '#demo4', 
	model: { label: { type: 'text' } },
	radio: true,
	clickClose: true,
	name:'orgId',
	tree: {
		show: true,
		strict: false,
		expandedKeys: [ -1 ],
	},
	height: 'auto',
	filterable:true
})

$.ajax({
	url:'#(path)/portal/core/sysOrg/getXmSelectData',
	type:"POST",
	data:{"selectData":"40288ae767ee75f70167ee7bae0a0001"},
	success:function(ret){
		if(ret.state=='ok'){
			var data=ret.data;
			demo4.update({
				data: data,
				autoRow: true,
			})
		}
	}
})

</script>
#end
